<template>
  <!-- 会员模块的基本信息管理 -->

  <div class="father-members">
    <!-- 查询页面 -->
    <div v-show="vouchers">
      <!-- 查询条件 -->
      <el-form ref="orderquery" :model="orderquery" size="mini" class="orderquery">
        <div style="display: flex; margin: 0 0 10px 0">
          <el-form-item label="名称" style="display: flex; margin: 0 30px 0 0">
            <el-input></el-input>
          </el-form-item>
          <el-form-item label="描述" style="display: flex; margin: 0 30px 0 0">
            <el-input></el-input>
          </el-form-item>
          <el-form-item label="生效日期" style="display: flex; margin: 0 30px 0 0">
            <el-date-picker v-model="seleData" type="date" placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="失效日期" style="display: flex; margin: 0 30px 0 0">
            <el-date-picker v-model="failureData" type="date" placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
        </div>
        <div style="display: flex; margin: 30px 0 10px 0">
          <el-form-item label="优惠券状态" style="display: flex; margin: 0 30px 0 0">
            <el-radio v-model="radio" label="1">停用</el-radio>
            <el-radio v-model="radio" label="2">激活</el-radio>
          </el-form-item>
          <el-button style="margin: 0px 10px 10px 30px" size="mini" type="primary" @click="immediatelyquery">立即查询
          </el-button>
          <el-button style="width:80px;margin: 0px 0px 10px 30px" size="mini" type="primary" @click="imediateadd">添加
          </el-button>
        </div>
      </el-form>
      <!-- 表格  -->
      <div class="container-table">
        <el-table :data="tableData" class="account_table" size="small" border :header-cell-style="{
          color: '#fff',
          background: '#6090EC',
          fontSize: '11px',
          fontWeight: 'normal',
        }">
          <el-table-column fixed prop="orderId" label="券编号" align="cneter">
          </el-table-column>
          <el-table-column fixed prop="orderId" label="券名称">
          </el-table-column>
          <el-table-column prop="orderId" label="生成时间"> </el-table-column>
          <el-table-column prop="orderId" label="有效期"> </el-table-column>
          <el-table-column prop="orderId" label="券类型"> </el-table-column>
          <el-table-column prop="orderId" label="操作人"> </el-table-column>
          <el-table-column fixed="right" label="操作">
            <template slot-scope="scope">
              <el-button type="primary" @click="handeredit(scope.row)" size="mini">修改</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

    <!-- 添加页面 -->
    <div v-show="!vouchers">
      <!-- 查询条件 -->
      <el-form ref="orderquery" :model="orderquery" size="mini" class="orderquery">
        <el-form-item label="名称" style="display: flex;margin: 15px 30px 0 0">
          <el-input></el-input>
        </el-form-item>
        <el-form-item label="描述" style=" display: flex;margin: 15px 30px 0 0">
          <el-input></el-input>
        </el-form-item>
        <el-form-item label="生效日期" style=" display: flex;margin: 15px 30px 0 0">
          <el-date-picker v-model="seleData" type="date" placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="失效日期" style="display: flex;margin: 15px 30px 0 0">
          <el-date-picker v-model="failureData" type="date" placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="优惠券状态" style="display: flex; margin: 15px 30px 0 0">
          <el-radio v-model="radio" label="1">停用</el-radio>
          <el-radio v-model="radio" label="2">激活</el-radio>
        </el-form-item>
      </el-form>

      <div style="margin:20px">
        <!-- 外层数组 -->
        <p class="business-p">
          <span>业务类型:</span>
        <ul class="business-ul">
          <li v-for="(item, index) in businessType" :key="index" @click="
          businessfn(item, index)">
            {{ item.title }}
          </li>
        </ul>
        </p>
        <!-- 优惠券的第一个数组 -->
        <p class="business-p coupons" v-show="flag0">
          <span>优惠券类型:</span>
        <ul class="business-ul">
          <li v-for="(item, index) in couponsType" :key="index" @click="handerclickcoupons(item, index)">
            {{ item.title }}
          </li>
        </ul>
        </p>
        <!-- 常用优惠券的第二个数组 -->
        <p class="business-p coupons" v-show="flag1">
          <span>常用优惠券:</span>
        <ul class="business-ul">
          <li v-for="(item, index) in usedType" :key="index" @click="handerclickpreferential(item, index)">
            {{ item.title }}
          </li>
        </ul>
        </p>
        <!-- 服务第三个数组  服务-->

        <p class="last-serve">
          <el-checkbox-group v-model="servevalue" @change="handleCheckedCitiesChange" v-show="flag2">
            <el-checkbox v-for="city in serveoptions" :label="city" :key="city">{{ city }}</el-checkbox>
          </el-checkbox-group>
        </p>

        <!-- 优惠券的子类 -->
        <div>
          <!-- 对应第一个下标的满减劵 -->
          <p class="Fullreduction" v-show="Fullreduction0">
            <el-descriptions :column="2">
              <el-descriptions-item label="满多少">
                <el-input></el-input>
              </el-descriptions-item>
              <el-descriptions-item label="减多少">
                <el-input></el-input>
              </el-descriptions-item>

              <el-descriptions-item label="应用范围">
                <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
                  <el-checkbox v-for="city in cities" :label="city" :key="city">{{ city }}</el-checkbox>
                </el-checkbox-group>
              </el-descriptions-item>
            </el-descriptions>
          </p>

          <!-- 对应第二个下标代减劵 -->
          <p class="Fullreduction" v-show="Fullreduction1">
            <el-descriptions :column="1">
              <el-descriptions-item label="金额">
                <el-input placeholder="请输入金额"></el-input>
              </el-descriptions-item>
              <el-descriptions-item label="应用范围">
                <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
                  <el-checkbox v-for="city in cities" :label="city" :key="city">{{ city }}</el-checkbox>
                </el-checkbox-group>
              </el-descriptions-item>
            </el-descriptions>
          </p>

          <!-- 对应第三个下标折扣劵 -->
          <p class="Fullreduction" v-show="Fullreduction2">
            <el-descriptions :column="1">
              <el-descriptions-item label="折扣">
                <el-input placeholder="百分点"></el-input>
              </el-descriptions-item>
              <el-descriptions-item label="应用范围">
                <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
                  <el-checkbox v-for="city in cities" :label="city" :key="city">{{ city }}</el-checkbox>
                </el-checkbox-group>
              </el-descriptions-item>
            </el-descriptions>
          </p>
        </div>
        <!-- 常用优惠券的子类 -->
        <div>
          <!-- 第一个商品兑换券 -->
          <p class="Fullreduction" v-show="Fullson0">
            <el-descriptions :column="1">
              <el-descriptions-item label="商品兑换券">
                <el-input placeholder="金额"></el-input>
              </el-descriptions-item>
            </el-descriptions>
          </p>
          <!-- 第二个商品折扣券 -->
          <p class="Fullreduction" v-show="Fullson1">
            <el-descriptions :column="1">
              <el-descriptions-item label="折扣">
                <el-input placeholder="百分点"></el-input>
              </el-descriptions-item>
            </el-descriptions>
          </p>
          <!-- 第三个商品折扣券 -->
          <p class="Fullreduction" v-show="Fullson2">
            <el-descriptions :column="1">
              <el-descriptions-item label="金额">
                <el-input placeholder="金额"></el-input>
              </el-descriptions-item>
            </el-descriptions>
          </p>

        </div>

        <el-button size="mini" type="primary" @click="imediateupp" style="width:120px;height:40px;margin:20px">保存
        </el-button>
      </div>
    </div>
  </div>
</template>

<script>
const cityOptions = [
  "会员",
  "机票",
  "酒店",
  "贵宾厅",
  "火车票",
  "旅游",
  "健康",
  "商城",
  "专车",
];

const serve = [
  "挂号服务体验劵",
  "挂号服务无限劵",
  "在线问诊无限劵",
  "健康体检体验券",
  "私人医生无限券",
  "航班延误体验券",
  "航班取消体验券",
  "贵宾厅体验券",
  "贵宾厅无限券",
  "景区门票体验券",
  "DD代驾领取券",
];
export default {
  name: "members",
  data() {
    return {
      vouchers: true, //控制盒子的显示隐藏
      orderquery: null,
      tableData: [
        { orderId: "111", applyTime: "111", status: "111", bankname: "111" },
      ],
      checkedCities: ["上海", "北京", "广州"],
      servevalue: [
        "挂号服务体验劵",
        "挂号服务无限劵",
        "在线问诊无限劵",
        "健康体检体验券",
      ],
      cities: cityOptions,
      serveoptions: serve,
      seleData: "", //时间日期
      failureData: "", //失效日期
      radio: "1", //优惠券状态
      businessType: [
        { title: "优惠券", id: 1, state: true },
        { title: "常用优惠券", id: 2, state: true },
        { title: "服务", id: 3, state: true },
      ], //大体东西
      // 优惠券的第一个数组
      couponsType: [
        { title: "满减卷", id: 1, state: true },
        { title: "代金券", id: 2, state: true },
        { title: "折扣劵", id: 3, state: true },
      ],
      // 常用优惠券的第二个数组
      usedType: [
        { title: "商品兑换券", id: 1, state: true },
        { title: "商品折扣券", id: 2, state: true },
        { title: "旅游抵扣券", id: 3, state: true },
      ],
      flag0: false,
      flag1: false,
      flag2: false,

      Fullreduction1: false,
      Fullreduction2: false,
      Fullreduction0: false,

      Fullson0: false,
      Fullson1: false,
      Fullson2: false,
    };
  },
  methods: {
    // 保存按钮
    imediateupp() {
      this.vouchers = !this.vouchers; //取反
    },
    // 添加
    imediateadd() {
      this.vouchers = !this.vouchers; //取反
    },
    // 查询
    immediatelyquery() { },
    // 修改   编辑
    handeredit(item, index) {
      this.vouchers = !this.vouchers; //取反
    },
    //   点中当前的li 跳转到当前对应到内容
    businessfn(item, index) {
      this.Fullreduction1 = false;
      this.Fullreduction2 = false;
      this.Fullreduction0 = false;
      this.Fullson2 = false;
      this.Fullson0 = false;
      this.Fullson1 = false;
      if (index == 2) {
        this.flag2 = true;
        this.flag0 = false;
        this.flag1 = false;

        this.Fullson2 = false;
        this.Fullson0 = false;
        this.Fullson1 = false;
      } else if (index == 1) {
        this.flag1 = true;
        this.flag2 = false;
        this.flag0 = false;
      } else if (index == 0) {
        this.flag0 = true;
        this.flag1 = false;
        this.flag2 = false;
      } else {
        console.log("什么都不用点点");
      }
    },
    // 单选框按钮事件
    handleCheckedCitiesChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.cities.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.cities.length;
    },
    // 优惠券数组
    handerclickcoupons(item, index) {
      this.Fullson2 = false;
      this.Fullson0 = false;
      this.Fullson1 = false;
      if (index == 2) {
        this.Fullreduction2 = true;
        this.Fullreduction0 = false;
        this.Fullreduction1 = false;
      } else if (index == 1) {
        this.Fullreduction1 = true;
        this.Fullreduction2 = false;
        this.Fullreduction0 = false;
      } else {
        this.Fullreduction0 = true;
        this.Fullreduction1 = false;
        this.Fullreduction2 = false;
      }
    },
    // 常用优惠券数组
    handerclickpreferential(item, index) {
      if (index == 2) {
        this.Fullson2 = true;
        this.Fullson0 = false;
        this.Fullson1 = false;
      } else if (index == 1) {
        this.Fullson1 = true;
        this.Fullson2 = false;
        this.Fullson0 = false;
      } else {
        this.Fullson0 = true;
        this.Fullson1 = false;
        this.Fullson2 = false;
      }
    },
  },
};
</script>

<style scoped>
#descriptions {
  border: 1px solid red;
}

.orderquery {
  margin: 20px;
}

.business-p {
  display: inline-flex;
  width: 100%;
  height: 50px;
}

.business-p span {
  line-height: 50px;
}

.business-ul {
  display: flex;
  margin-left: 15px;
}

.business-ul li {
  height: 50px;
  background-color: #5fb878;
  padding: 20px;
  box-sizing: border-box;
  margin-right: 15px;
  color: #fff;
  text-align: center;
}

.coupons {
  margin-top: 20px;
}

.Fullreduction {
  margin-top: 20px;
}

.last-serve {
  margin-top: 20px;
  line-height: 50px;
}

.container-table {
  width: 95%;
  margin: 20px;
}
</style>
